<template>
    <div>
        <div style="height: 30px; line-height: 30px;padding-left: 20px;">
              <h1>短信模版查询</h1>
        </div> 
        <div>
            <ui-form ref="paramForm" label-width="100px" class="demo-ruleForm">
                <ui-row type="flex" class="row-bg" justify="space-around">
                    <ui-col :span="8">
                        <ui-form-item label="参数编号" prop="paramNo">
                        <ui-input ></ui-input>
                        </ui-form-item>
                    </ui-col>
                    <ui-col :span="8">
                        <ui-form-item label="参数名称" prop="paramname">
                        <ui-input></ui-input>
                        </ui-form-item>
                    </ui-col>
                </ui-row>
                <ui-row type="flex" class="row-bg" justify="space-around">
                    <ui-col :span="8">
                        <ui-form-item label="创建时间" prop="paramname">
                                <ui-date-picker
                                v-model="add"
                                type="datetimerange"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                value-format="yyyy-MM-dd"
                            >
                            </ui-date-picker>
                        </ui-form-item>
                   
                    </ui-col>
                        <ui-col :span="8">

                        </ui-col>
        
                </ui-row>

                <ui-row type="flex" class="row-bg" justify="center">
                    <ui-button type="primary" @click="submitForm('paramForm')">查询</ui-button>
                    <ui-button @click="resetForm('paramForm')">重置</ui-button>
                </ui-row>
            </ui-form>
        </div>
        <div>
            <div>
                <span style="float: left;">短信模板列表</span>
                <ui-button style="float: right;" @click="smsadd">新增</ui-button>
            </div>




            <vx-table :tableData="tableData" :isSelect="false" :columns="columns" @multipleSelection="multipleSelection"
                    :buttomGroup="buttomGroup" @openDetails="openDetails" ></vx-table>
            <ui-pagination
                :total="total"
                :page-size="pageSize"
                :current-page="currentPage"
                :layout="layout"
                :page-sizes="pageSizeList"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            >
            </ui-pagination>
        </div>
        <ui-dialog
        :visible.sync="dialogVisible"
        width="30%"
        >
            <span>
                请确认是否删除该短信模版
            </span>
            <span slot="footer" class="dialog-footer">
         
                <el-button style="float: right;" type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </ui-dialog>

    </div>
</template>
<script>
import pagination from '@/common/mixin/pagination.js'; // 混入分页
import vxTable from '@/components/vx-table';
 export default{
    mixins: [pagination],
    components:{
        vxTable,
    },
     data(){
        
        return{
            dialogVisible:false,
            add:'',
            layout:"total, sizes, prev, pager, next, jumper", // 分页顺序
            columns:[
                {
                prop: 'userName',
                label: '模版编号',
                fixed: true,
                },
                {
                prop: 'userName',
                label: '模版类型',
                fixed: true,
                },
                {
                prop: 'userName',
                label: '模版概述',
                fixed: true,
                },
                {
                prop: 'userName',
                label: '创建日期',
                fixed: true,
                },

            ],
            tableData:[],
            buttomGroup:[
                { label: '修改', methodsName: 'openDetails' },
                { label: '删除', methodsName: 'openDetails' }
            ]
        }
     },
     methods:{
        smsadd(){
            // this.$router.push({
            //     path:'smsDetails'
            // })
            this.dialogVisible=true;
        }
     }
 }
</script>